<template>
	<view class="receipt-page">
		<view class="map-block">
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
			<view class="address-item">
				<view class="iconfont icon-wancheng"></view>
				<view class="address">已进入回单打卡范围：新世纪花园12号楼</view>
			</view>
		</view>
		<view class="info-block">
			<view class="form-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">拍照（拍摄回单照片）</view>
				</view>
				<view class="img-item">
					<view class="img-info">
						<image class="imgs" :src="form.front"></image>
						<view class="status">维修前</view>
					</view>
					<view class="img-info">
						<image class="imgs" :src="form.after"></image>
						<view class="status">维修后</view>
					</view>
				</view>
			</view>
		</view>
		<view class="info-block">
			<view class="form-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">工作描述</view>
				</view>
				<view class="form-crl1">{{form.content}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js';
	import {
		getStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				form: {
					front: '',
					after: '',
					content: '故障描述故障描述故障描述故障描述故障描述故障描述故障描述'
				},
				rule: {
					front: {
						name: '维修前照片',
						required: true
					},
					after: {
						name: '维修后照片',
						required: true
					},
					content: {
						name: '工作描述',
						required: true
					}
				},
				longitude: '',
				latitude: '',
				markers: [{
					id: 1,
					longitude: '',
					latitude: '',
					iconPath: '/static/images/iconPath.png',
					width: 32,
					height: 32,
				}]
			}
		},
		methods: {
			getPosition() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.markers[0].longitude = res.longitude
						that.markers[0].latitude = res.latitude
						that.longitude = res.longitude
						that.latitude = res.latitude
					}
				});
			},
		},
		onLoad(e) {}
	}
</script>

<style lang="scss" scoped>
	.receipt-page {
		padding: 30rpx;

		.map-block {
			background-color: #fff;
			border-radius: 30rpx;

			.map {
				width: 100%;
				height: 300rpx;
			}

			.address-item {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 30rpx;
				font-size: 28rpx;

				.iconfont {
					width: 50rpx;
					color: #46a100;
				}

				.address {
					width: calc(100% - 50rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.info-block {
			background-color: #fff;
			padding: 40rpx 30rpx;
			border-radius: 30rpx;
			margin-top: 30rpx;

			.form-item {
				.name-item {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.must {
						color: $theme-color;
					}

					.name {
						font-size: 28rpx;
					}
				}

				.form-crl {
					font-size: 30rpx;
				}

				.form-crl1 {
					font-size: 30rpx;
					min-height: 120rpx;
					width: 100%;
				}

				.form-content {
					font-size: 30rpx;
					width: 100%;
					line-height: 48rpx;
				}

				.placeholder {
					color: grey;
					font-size: 15px;
				}

				.img-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.img-info {
						width: calc(50% - 15rpx);
						display: flex;
						justify-content: space-between;

						.imgs {
							width: 100%;
							height: 240rpx;
							border-radius: 20rpx;
							background-color: #f2f2f2;
							display: flex;
							align-items: center;
							justify-content: center;

							.iconfont {
								font-size: 56rpx;
								color: #bebaba;
							}
						}

						.status {
							position: absolute;
							margin-left: 190rpx;
							font-size: 24rpx;
							width: 110rpx;
							height: 46rpx;
							background-color: $theme-color;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							border-radius: 0 20rpx 0 20rpx;
						}
					}
				}
			}
		}

		.btn {
			height: 90rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
	}
</style>